<template>
  <!-- Header -->
  <view
    class="head bg-gradient-to-r from-orange-600 to-orange-400 text-white p-4 sticky top-0 z-10"
  >
    <view class="flex items-center">
      <ChevronLeft class="w-6 h-6 mr-2" @click="goBack" />
      <text class="text-xl font-bold line-clamp-1">{{ props.title }}</text>
    </view>
  </view>
</template>
<script setup>
import { ChevronLeft } from 'lucide-vue-next'

const props = defineProps({
  title: {
    type: String,
    default: '邻里生活荟',
  },
})

const goBack = () => {
  uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.head {
  padding-top: calc(var(--status-bar-height) + 1rem);
}
</style>
